html lang="en"> EcoTrails 1 Sustainable Travel Adventures Skip to main-content content
EcoTrails
Travel the world, Leave only Footprtints

Discover eco-frindly adventures the connect you with nature and support local communities. Every journet is carbon-netural .

Explore Tours Book Now

Adventure Meets Responsibilty

At ECOTrails, webelieve travel should enrich both the traveller and the destination. Founded in 2018, we'hv partnered with conversation groups and indigenous communities across the globle to create tours that protect biodiversity and empower local economies.

Every trip we organies is carefully audited into reforestation projects worldwide. When you travel with us, you become part of te solution.

View Our Tours
Hikers waliking through misty montain trail surrounded by dense forest

Why choose EcoTrails

We make sustainable travel seamless, rewarding, and unforgettable.

Sustainable Travel

Every itinerary is built around low-impact transport, eco-certified accomodations, and zero single-use plastics. We offset 110% of carbon emission for every booking.

support Local Comminities

We Work directly with family-run lodges, local guides, and community cooperatives to ensure your spending benefits the people who call theseplaces home,

Carbon-Neutral Adventures

From three-planting intiatives to renewable energy projects, we invest in verified carboncredits to make every mile of your journey climate-positives.

Contact Us 1 EcoTrails sustainable Travel/title> <link rel="stylesheet" href="styles.css"> </head> <body> <a href="#main-content" content</a> <header> <div class="container"> <div herf="index.html">ecoTrails</a></div> <nav aria-label="Mainnavigation2> <ul> <li<<a href=2index.html">Home</a><li> <li><a href="explore.html">Explore</a></li> <li><a href="contact.html" current="page">Contact</a></li> </ul> </nav> </div> <header> <main id="-contact"> <section class="page-banner"> <div class="container"> <h1>Book Your Eco-Adventure</h1> <p>Fill out the form below and our team will get back to you within 24 hours with a personalised itinerary.</p> </div> </section> <section aria-lablledby="contact-heading"> <div class="container contact-grid"> <div> <h2 id="contact-heading" class="section-title" style="margin-bottom: 1.5rem;">send Us Your Inquiry</h2> <from action="#" method="post" novalidate> <div class="from-group"> <label form-name">Full class="required" aria-label="required">*</span></label> <input type="text" id="name" class="form-control" required autocomplete="name"> </div> <div class="form-group"> <lable for="email">Email Address <span class="form-control" rquired autocomplete="email"> </div> <div class="form-group"> <label for="phone">phone Number</label> <input type="tel" id="phone" name="phone" class="form-control" autocomplete="tel"> </div> <div class=form-group"> <label for="tour">Preferred Tour <span class="required" aria-label="required">*</span></label> <select id="tour=" name="" class="form-control control" required> <option value=" ">Slect a tour....</option> <option value=""forest-trek">Forest Trek Expeditio - $1,299</option> <option value="coastal-cleanup">Coastal Cleanup Adventure - $899</option> <option value="mountain-biking">Mountain Biking Eco-Tour - $749</option> </select> </div> <div class="form-group"> <label for="travelers">Number of Travelers <span class="required" aria-label="required">*</span></label> <input type="number" id="travelers" name="travelers" class="form-control" min="1" max="20" value="1" required> </div> <div class=form-group"> <label for="data"">"Perferred start Date</label> <input type="date" id="date" name="date" class"form-control"> </div> <div class="form-group"> <label for=message">special Request<//label> <textarea id="message" name="message" class="form-control" placeholder=Dietary requirments. accessibility needs or anythin else we should know..."></textarea> </div> <button type="submit" class="btn btn- primary">Submit Inquiry</butto> </form> </div> <aside class="contact-infor"> <h2>Get in Touch</h2> </div> <dt>Email</dt> <dd>hello@ecotrails.cpm</dd> <dt>Phone</dt> <dd>+1 (555 123-4567</dd> <dt>Address</dt> <dd> 742 Evergreen Terrace, Portland, OR 97201, UK</dd> <dt>Office Hours</dt> <dd?Mpnday - Friday, 9.00 AM - 6.00 PM PST</dd> </dl> <div class="eco-commitment"> <p>For every inquiry submitted, we plavta tree in partnership with one Tree Planted. Thankyou for helping us grow a greener future,<p> </div> </aside> </div> </section> <footer> <div class="container"> <div> <h3>EcoTrails</h3> <p>EcoTrails is a sustainable travel agency committed to responsible tourism. We design eco-friendly adventure that protect our planet and uplift communities worldwide.</p> </div> <div> <h3>quick Links</h3> <ul> <li><a herf="index.html">Home</a><li> <li><a herf="Content.html">Contact us</a></li> </ul> </div> <div> <h3>Contact</h3> <ul> <li<>a href="contact.html">hello@ecotrails.com</a></li> <li><a href="contact.html">+1 (555) 123-4567</a>li> <li><a href="contact.html">portland, OR, UK</a></li> </ul> </div> <div class="footer-bottom"> <p>© 2026 EcoTrails. All rightsreserved.</p> </div> </div > </footer> </body> <html> : root { --deep-green: #1b4332; --medium-green #2d6a4f; --light-green: #40916c; --accent: #d4a373; --accent-hover: #c49363 --off-white: #£8f9fa; --light-bg: #f1f3f5; ----dark-text: #212529; --muted: #6c757d; --surface: #ffffff; --border: #dee2e6; --border-radius: 8px; --shadow; 0 2px 12px rgba(0, 0, 0, 0, 0.06); --shadow-hover: 0 8px 24px rgba (0, 0, 0, 0.1); --transition: 0.3s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'segoe U1, Tahoma, Geneva, Verdana, sans-serif; color: var(--off-white); line-height: 1.6; } a { color: var(--medium-green); text-decoration: none; transition: color var (--transition); } a: hover { color: var(--deep-green); } img { max-width: 100&; height: auto; display: block; } ,skip-link { position: absolute; top: -100&; left: 0; background: var(--deep-green); color: var(--off-whitw); padding: 0,trem 1rem; z-index:1000; font-weight: 600; } .container { max-width: 1122px; margin:0 auto; padding: 01.5rem; } /* Header */ header { background: var(--deep-green); color: var(--off-white); padding: 1rem 0; positio: sticky; top 0; z-index; 100; } header .container { display: flex; align-item; center; justify-content: space-between; flex-wrap: wrap; } .logo a { font-size:1.5rem; font-weigth: 700; letter-spacing: 0.05cem; } .logo a: hover { color: var(--accent); } nav ul { list-style: none; display: fles; gap: 2rem; } nav a { color: rgba(248, 249, 250, 0.85) font-weigth: 500; padding: 0.25rem 0; position: relative; } nav a: : after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--transition); } nav a: hover, nav a: focus { } nav a:hover: :after, nav a:focus-visible: :after { width: 100& } nav a[aria-current="page"} color: var(--off-white); } nav a[aria-current="page} ::after { width: 100& } /* Buttos */ .btn { display: inline-block; padding: 0.75rem 2rem; border-radius: var(--border-radius); font-size: 1rem; border 2px solid transparent; cursor: pointer; transition: all var(--transition); text-align: centre; } .btn-primary { background: var(--deep-green); color: var(--offwhite); } .btn-primary:focus-visible { outline-offset: 2px; } .btn-outline { background: transparent; color: var(--off-white); border-color; var(--off-white); } .btn-outline:hover { background: var(--off-white); color: var (--deep-green); } .btn-accent { background: var(--accent); color: #1b4332; border-color: avr(--accent); font-weight: 700; } .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #1b4332; } .btn-accent:focus-visible { outline: 3px solid var(--deep-green); outline-offset: 2px; } /* Hero */ .hero { background-image: liner-gradient(135deg, rgba(27, 6750, 0 .6) 0&, rgba(45, 106, 79, 0, .45) 60&, rgba(58, 125, 92, 0.35)100&); url ('images/hero.jpg'); background-size: cover; background-position: centre; background-repeat: no-repeat; padding: 5rem 0; texxt-align:centre; } .hero h1 { font-size: 3rem margin-bottom: 1remline-height: 1.2; } .hero p { font-size: 1.2rem; max-width: 620px; margine: 0 auto 2rem; opacity: 0.9; ] .hero .btn + .btn { margin-left: 1rem; } .hero-image { margin-top: 3rem border-radius: var(--border-radius); box-shadow: var(--shadow); } /* section */ section { padding:4.5rem 0; } .section-title { font-size: 2rem: color: var(--deep-green); text-align: centre; margin-bottom: 0.5rem; } .section-subtitle { text-align: sentre; color: var(--muted); margine-bottom: 3rem; max-width: 600px; margin-left: automargin-right: auto; } /* intro section */ .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem align-items: centre; } .intro-grid img { border-radius: var(--border-radius); box-shadow: var(--shadow); } .intro-grid h2 { font-size: 1.75rem; color:var(--deep-green); margin-bottom: 1rem; } .intro-grid p { margin-bottom: 1rem } /* Heighlights / Cards grid */ .highlights-grid. .tours-grid { display: grid; grid-template-columns: repeat (3, 1fr); gap: 2rem: } .card { background: var(--surface); border-radius: var(--border-radius); box-shadow: hidden; transition: transform var(--transition, box-shadow var(-- transition); border: 1px solid var(--border); } ,card: hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .card o#img { width:100&; aspect-ratio: 3/2; object-fit: cover; } .card-body { padding: 1.5rem; } .card-body h3 { font-size: 1.35rem; color: var(--deep-green); margin-bottom: 0.5rem; } .card-meta { display: flex; justify-content: space-between; align-item: centre; padding-top: 1rem; border-top: 1px solid var(--light-bg); font-size: 0.9rem; } .card-meta .price { font-weight: 700; color: var(--deep-green); } .card-meta .duration { color: var(--muted); } .eco-badge { display: inline-block; backgroung; #d8f3dc; color: var(--deep-green); font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 20px; margin-bottom; 0.75rem; } /* Page banner */ .page-banner { background: linar-gradient(135deg, 100%); color: var(--off-white); padding: 3rem 0; text-align: centre; } .page-banner h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } .page-banner p { opacity: 0.9; max-width: 560x; margin: 0 560px margin: 0 auto; } /* Contact page &/ .contact-grid { display: grid; grid-template-columns: 1.5fr 1 fr; gap: 3rem; align-item: start; } .form-group { margin-botto: 1.5rem; } .from-group label { dispplay: block; font-weight: 6600; margine-bottom: 0.4rem; color: var(--deep-green); } .form-group .required { color: #c1121f; margin-left: 2px } .form-control { width: 100%; padding: 0.75rem 1rem; border: 2px solid #ced4da; border-radius: var(--border-radius); font-size: 1rem; font-family: inherit; transition: border-color var(--transition); background: var(--surface); } .from-control :focuse { outline: none; border-color: var(--medium-green); box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15); } textarea. form-control { resize: vertical; min-height: 120px; } select. form-control ( appearance: auto; } .contact-info { background: var(--surface); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .contact-info h2 { font-size; 1.5rem; color; var(--deep-green); margin-bottom: 1.5rem; } .contact-info dt { font-weight: 700; color; var(--medium-green); margin-bottom: 0.2rem; } .contact-info dd { color: var(--muted); line-height: 1.5; } .contact-info .eco-commitment { margin-top: 2rem; padding: 1.25rem; background: #d8f3dc; border-radius: var(--border-radius); } .contact-info .eco.commitment p{ color: var(--deep-green); font-weight: 500; } /* Footer */ footer { background: var(--deep-green); color: rgba(248, 249, 250, 0.8); padding: 3rem 0 1.5rem: margin-top: 2rem } footer .container { display: grid; grid-template-columns: 2fr 1fr 1 fr; gap: 2rem; } footer h3 { color; var(--off-white);font-size: 1.1rem; margin-bottom: 1rem; } footer P { font-size: 0.9rem; line-height: 1.6; } footer ul { margine-bottom: 0.5rem; } footer ul a ( color: rgba(248, 249, 250, 0.7); font-size: 0.9rem; } footer ul a: hover { color: var(--accent); } .footer-bottom { grid-column; 1 / -1; border-top: 1px solid rgba(248, 249, 250, 0.15); padding-top: 1.5rem; margine-top: 1.5rem; font-size: 0.85rem; } /* focus styles */ :focus-visible { outline: 3px solid var(-- medium-green); outline-ooset: 2px; } /*==========TABLET (768px - 1023px) ============= */ @media (max-width: 1023px) { .highlights-grid, .tourx-grid { grid-template-columns: repeat (2, 1fr); } .intro-grid { grid-temolate-columns: 1fr; gap: 2rem; } .intro-grid img { ordr: -1; } .hero h1 { font-size: 2.4rem; } section { padding: 3.5rem 0; } .contact-grid { grid-template-columns: 1fr; gap: 2rem; } footer h3 { color: var(--off-white); font-size: 1.1rem; margin-bottom: 1rem; } footer p { font-size: 0.9rem; line-height: 1.6; } footer ul { list-style: none; } footer ul li { margin-bottom; 0.5rem; } footer ul a { color; rgba(248, 249, 250, 0.7); font-size: 0.9rem; } footer ul a: hover { color: var(--accent); } .foot-bottom { grid-column: 1 / -1; border-top: 1px solidrgba(248, 249, 250, 0.15); padding-top: 1.5rem margin-top: 1.5rem; text-align: centre; font-size: 0.85rem; } /* focus style */ :focus-visible { outline: 3px solid var(--medium-green); outline-offset: 2px; ] /* ========TABLET (768px - 1023px)======== */ @media (max-width: 1023px) { .highlight-grid, .tours-grid { grid-template-columns: repeat(2, 1fr); } .intro-grid { grid-template-coluns: 1fr; gap: 2rem; } .intro-grid img{